<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';

const chart1 = ref(null);
const chart2 = ref(null);
const chart3 = ref(null);
let pieChart = null;
let lineChart = null;
let barChart = null;

onMounted(async () => {
  await nextTick();
  // 设置图表大小为宽度400px，高度300px
  pieChart = echarts.init(chart1.value, null, { width: 400, height: 300 });
  lineChart = echarts.init(chart2.value, null, { width: 400, height: 300 });
  barChart = echarts.init(chart3.value, null, { width: 400, height: 300 });

  const option1 = {
    // 图表配置选项
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' },
          { value: 30, name: 'rose 4' },
          { value: 28, name: 'rose 5' },
          { value: 26, name: 'rose 6' },
          { value: 22, name: 'rose 7' },
          { value: 18, name: 'rose 8' }
        ]
      }
    ]
  };

  const option2 = {
    title: {
      text: 'Line Chart'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }
    ]
  };

  const option3 = {
    title: {
      text: 'Bar Chart'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [5, 20, 36, 10, 10, 20, 5],
        type: 'bar'
      }
    ]
  };

  pieChart.setOption(option1);
  lineChart.setOption(option2);
  barChart.setOption(option3);
});

onUnmounted(() => {
  if (pieChart && pieChart.dispose) {
    pieChart.dispose();
  }
  if (lineChart && lineChart.dispose) {
    lineChart.dispose();
  }
  if (barChart && barChart.dispose) {
    barChart.dispose();
  }
});
</script>

<template>
  <el-card>
    <div ref="chart1" class="chart"></div>
    <div ref="chart2" class="chart"></div>
    <div ref="chart3" class="chart"></div>
  </el-card>
</template>

<style scoped>
.chart{
  /* 这里可以保留默认的CSS设置，也可以根据需要覆盖 */
}
</style>